<template>
	<view class="chat-item">
		<!-- 头像区域：固定尺寸120rpx，与GroupAvatar的size默认值一致 -->
		<view class="chat-avatar">
			<GroupAvatarVue
			v-if="chatItem.type!=='favorite'"
				:avatars="chatItem.avatarList"
				:size="100"
				:border-width="3"
				border-color="#1f1f1f"
			    :border-radius="chatItem.type==='group'?'8rpx':'50%'"
			></GroupAvatarVue>
		    <view v-if="chatItem.type==='favorite'">
				<uni-icons type="location" size="50" color="#00aa00"></uni-icons>
			</view>
		</view>

		<!-- 名称与内容区域（保持原有逻辑不变） -->
		<view class="chat-content">
			<view class="chat-name-row">
				<text class="chat-name">{{ chatItem.title }}</text>
				<view class="chat-tag" v-if="chatItem.isTop">置顶</view>
			</view>
			<view class="chat-msg-row">
				<text class="chat-msg" :class="{ 'chat-msg--unread': chatItem.badgeText > 0 }">
					<text v-if="chatItem.msgType === 'image'">[图片]</text>
					<text v-if="chatItem.msgType === 'voice'">[语音]</text>
					<text v-if="chatItem.msgType === 'video'">[视频]</text>
					<text v-if="nicName">{{nicName +':'}}</text>
					<text>{{ chatItem.note || '暂无消息' }}</text>
				</text>
			</view>
		</view>

		<!-- 时间与未读计数区域（保持原有逻辑不变） -->
		<view class="chat-status">
			<text class="chat-time">{{ formatMessageTime(chatItem.time) || '刚刚' }}</text>
			<view class="loca-count" v-if="chatItem.badgeText > 0">
				{{ chatItem.badgeText > 99 ? '99+' : chatItem.badgeText }}
			</view>
		</view>
	</view>
</template>

<script>
import GroupAvatarVue from './GroupAvatar.vue';
import AvatarFallbackVue from './AvatarFallback.vue';
import formatMessageTime from '@/utils/formatMessageTime';
import getFriendUserInfo from '../utils/getFriendUserInfo';


export default {
	name: 'chatViewItem',
	components: {
		AvatarFallbackVue,
		GroupAvatarVue
	},
	data(){
		return{
		  nicName:''	
		}
	},
	props: {
		chatItem: {
			type: Object,
			default: () => ({})
		}
	},
watch: {
  chatItem: {
    handler: async function(newval) {
  
      if (!newval) {
        this.nicName = ''; 
        return;
      }

  
      let sendUserId;
      if (['group', 'public', 'favorite'].includes(newval.type)) {
        sendUserId = newval.sendUserId; 
      } else if (newval.type === 'person') {
        sendUserId = newval.userId; 
      }

        if (!sendUserId) {
        this.nicName = '未知用户'; 
        return;
      }

      try {
    
        const res = await getFriendUserInfo(sendUserId);
        this.nicName = res?.nicName || '未知用户'; // 可选链判断，避免 res 为 null
      } catch (error) {
        console.error('获取用户昵称失败：', error);
        this.nicName = '未知用户'; // 异常时显示默认值，提升用户体验
      }
    },
    immediate: true, // 初始化立即执行
    deep: true // 若 chatItem 是复杂对象，需要深度监听（否则内部属性变化可能不触发）
  }
},
	
	methods: {
		formatMessageTime,

	}

};
</script>

<style lang="scss" scoped>
/* 聊天列表项外层容器（保持原有逻辑不变） */
.chat-item {
	display: flex;
	align-items: center;
	padding: 15rpx 10rpx;
	transition: background-color 0.2s ease;
	border-bottom: 1rpx solid rgba(0, 122, 255, 0.1);

	&:active {
		background-color: #f0f0f0;
	}
}

/* 头像区域：固定尺寸120rpx，确保GroupAvatar不会被拉伸 */
.chat-avatar {
	width: 100rpx; /* 与GroupAvatar的size一致 */
	height: 100rpx; /* 与GroupAvatar的size一致 */
	flex-shrink: 0;
	margin-right: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 移除多余的border-radius，避免与GroupAvatar冲突 */
}

/* 名称与内容区域（保持原有逻辑不变） */
.chat-content {
	flex-grow: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.chat-name-row {
	display: flex;
	align-items: baseline;
	margin-bottom: 8rpx;
}

.chat-name {
	font-size: 30rpx;
	font-weight: 500;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-tag {
	font-size: 22rpx;
	color: #007aff;
	background-color: rgba(0, 122, 255, 0.1);
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
	margin-left: 16rpx;
}

.chat-msg-row {
	display: flex;
	align-items: center;
}

.chat-msg {
	font-size: 26rpx;
	color: #ababab;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-msg--unread {
	color: #8ec5ff;
	font-weight: 450;
}

/* 时间与未读计数区域（保持原有逻辑不变） */
.chat-status {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 12rpx;
}

.chat-time {
	font-size: 24rpx;
	color: #999;
	white-space: nowrap;
}

	.loca-count {
			font-size: 22rpx;
			align-self: flex-end;
			font-weight: 700;
			color: #ffffff;
			background-color: #00bc00; /* 红色气泡，突出未读 */
			width: fit-content;
			min-width: 40rpx;
			height: 36rpx;
			line-height: 36rpx;
			text-align: center;
			border-radius: 18rpx; /* 胶囊形 */
			margin-top: 8rpx;
			padding: 0 10rpx;
		}
</style>
